import { Avatar } from '@arco-design/web-react';
import { IconUser } from '@arco-design/web-react/icon';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import { useRecoilValue } from 'recoil';
import { userInfoState } from '../../../../../store/userInfo';
import { ConversationType, PermissionType, UserInfo } from "../../../../types/conversation";
import { ConversationInfoItem } from '../../../../types/conversation';
import './index.css';

interface ConversationItemProps {
  data: ConversationInfoItem;
  currentConversation?: ConversationInfoItem;
  handleChangeConversation: (conversation: ConversationInfoItem) => void;
  setConversationIndex?: () => void;
  isSelect?: boolean;
}

export const ConversationItem: React.FC<ConversationItemProps> = (props) => {
  const { data, handleChangeConversation, isSelect = false } = props;
  const userInfo = useRecoilValue(userInfoState);
  const [conversationItemInfo, setConversationItemInfo] = useState<UserInfo>();
  const { news_content, update_time } = data;


  useEffect(() => {
    const { user_info, another_user_info } = data;
    if (userInfo.id === user_info.id && userInfo.id !== 1) { // 此时应该渲染对方的数据
      setConversationItemInfo(another_user_info)
    } else {
      setConversationItemInfo(user_info)
    }
  }, [data]);


  return (<div className={data.type === ConversationType.End && !(userInfo.permission === PermissionType.customer) ? "conversation-item conversation-end-item" : "conversation-item"} style={{ backgroundColor: isSelect ? '#f3f6fe' : '' }} onClick={() => { handleChangeConversation(data) }}>
    {/* <img className='conversation-item-header' src={header_img} alt="" /> */}
    <Avatar style={{ backgroundColor: '#3370ff' }}>
      <IconUser />
    </Avatar>
    <div className='conversation-item-content'>
      <div className='conversation-item-user-info'>
        <div className='name'>{userInfo.permission === PermissionType.customer ? '基础客服' : conversationItemInfo?.username}</div>
        <div className='update-time'>{dayjs(update_time).format('HH:mm')}</div>
      </div>

      <div className='conversation-item-new-info'>{news_content}</div>
    </div>
  </div>)
}